<!--
 * @Description  : 汇总统计
 * @Author       : zhao
 * @Date         : 2022-07-26 08:54:12
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-01 09:45:32
-->
<template>
    <div class='SummaryStatistic'>
        <ztitle :name="'数据汇总统计'" />
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="馆藏资料现状统计" name="1">
                <distributionChart v-if="activeName == '1'" />
            </el-tab-pane>
            <el-tab-pane label="馆藏资料借阅利用统计" name="2">
                <trendChart v-if="activeName == '2'" />
            </el-tab-pane>
            <!-- <el-tab-pane label="排名" name="3">
                <rankChart v-if="activeName == '3'" />
            </el-tab-pane> -->

        </el-tabs>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import distributionChart from './distributionChart.vue'
import trendChart from './trendChart.vue'
import rankChart from './trendChartYear.vue'
import ztitle from '/@/components/ztitle/index.vue';
const activeName = ref("1")

const handleClick = () => { }
</script>
<style lang='scss' scoped>
.SummaryStatistic {
    background: white;
    padding: 20px;
    min-height: calc(85vh);

    ::v-deep(.el-tabs) {
        border-radius: unset !important;
        border: 1px solid var(--el-color-primary-light-9);
        padding: 10px;

        .el-tabs__header {
            margin-bottom: 0;
        }

        .el-tabs__content {
            border: 1px solid #eee;
            padding: 10px;
        }

    }
}
</style>